<template>
  <div class="a">
    <!-- <p class="title">区域自动站查询</p> -->

    <div class="time">
      <span>时间：</span>
      <el-date-picker
        v-model="value1"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="雨量" name="first">
        <div class="btns">
          <el-button size="small">整点雨量</el-button>
          <el-button size="small">1小时雨量</el-button>
          <el-button size="small">3小时雨量</el-button>
          <el-button size="small">6小时雨量</el-button>
          <el-button size="small">12小时雨量</el-button>
          <el-button size="small">24小时雨量</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="温度" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="风速" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="湿度" name="fourth">定时任务补偿</el-tab-pane>
      <el-tab-pane label="气压" name="fifth">定时任务补偿</el-tab-pane>
    </el-tabs>
    <div class="checkList">
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="剔除站点"></el-checkbox>
        <el-checkbox label="显示站点名称"></el-checkbox>
        <el-checkbox label="河流流域"></el-checkbox>
        <el-checkbox label="降序"></el-checkbox>
        <el-checkbox label="国家站"></el-checkbox>
        <el-checkbox label="显示数值"></el-checkbox>
        <el-checkbox label="自动站"></el-checkbox>
      </el-checkbox-group>
      <p>站点编辑</p>
      <div class="btn">
        <el-button size="small">多要素查询</el-button>
        <el-button size="small">清除</el-button>
      </div>
    </div>
    <div class="tjt">
      <p>单站点统计图</p>
      <div class="xz">
        <span>乡镇：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="xz">
        <span>站点：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="btn">
        <el-button size="small">小时统计图</el-button>
        <el-button size="small">日均统计图</el-button>
      </div>
    </div>
    <div class="dzt">
      <p>等值图设置</p>
      <div style="margin-top: 10px">
        <el-checkbox label="采用自动分级设置"></el-checkbox>
      </div>
      <div class="fjs"><span>分级数：</span><el-input type="number" /></div>
      <div class="fjs"><span>基准色：</span><el-input type="color" /></div>
      <div class="btns">
        <el-button type="small">显示</el-button>
        <el-button type="small">清除</el-button>
        <el-button type="small">导出图片</el-button>
        <el-button type="small">显示图例</el-button>
        <el-button type="small">清除图例</el-button>
        <el-button type="small">等值线设置</el-button>
      </div>
    </div>
    <div class="yqkb">
      <p>雨情快报</p>
      <div class="time">
        <span>时间：</span>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="zzr">
        <span>制作人：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="yy">
        <el-radio v-model="radio" label="1">益阳</el-radio>
      </div>
      <div class="wdqh">
        <span>文档期号：</span>
        <el-input style="width: 200px; height: 20px"></el-input>
        <el-button type="small" style="margin-left: 10px">修改</el-button>
      </div>
      <div class="sqxx">
        <el-checkbox label="是否添加水情信息"></el-checkbox>
      </div>
      <el-button type="small" style="margin-top: 10px">雨情快报生成</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: "",
      checkList: [],
      value: "",
      options: [],
    };
  },
};
</script>
<style scoped lang="less">
.a {
  pointer-events: all;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 10px;
  .time {
    margin-top: 5px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 10px;
    .el-date-editor {
      width: 300px;
    }
  }
  .el-tabs__nav-scroll {
    border-bottom: 1px solid #dedede;
  }
  .el-tabs {
    height: 150px;
    border-bottom: 1px solid #dedede;
  }
  .btns {
    display: flex;
    flex-wrap: wrap;
    .el-button {
      margin: 3px;
    }
  }
  .checkList {
    margin-top: 5px;
    border-bottom: 1px solid #dedede;
    padding-bottom: 10px;
    p {
      color: blue;
      width: 100%;
      margin: 10px auto;
      display: flex;
      justify-content: center;
    }
    .btn {
      display: flex;
      justify-content: center;
    }
  }
  .tjt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #dedede;
    padding-bottom: 10px;
    .xz {
      margin: 10px auto;
    }
  }
  .dzt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    .fjs {
      margin: 10px auto;
      .el-input {
        width: 200px;
      }
    }
    .btns {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      .el-button {
        width: 100px;
      }
    }
  }
  .yqkb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    .el-input,
    .el-select {
      width: 300px;
    }
    .time,
    .zzr,
    .yy,
    .wdqh,
    .sqxx {
      margin-top: 10px;
    }
  }
}
</style>
